<template>
  <div class="app-container">
    <descriptions :formData="form" :type="submitType" :cols="descritionCols" @submit="handleSubmit">
      <template slot="extra" v-if="form.score > 0"> 总分:{{ form.score }} </template>
    </descriptions>

    <div v-for="titleItem in form.titleItems" :key="titleItem.name" style="margin-top: 20px;">
      <div>
        <div>
          标题:
          <el-input
            v-model="titleItem.name"
            style="width: 300px;"
            :disabled="submitType === 2"
          ></el-input>
          <el-button type="text" v-if="submitType !== 2" @click="addQuestion(titleItem)"
            >添加题目</el-button
          >
        </div>
        <div class="question-container">
          <el-card
            style="margin-top: 10px;"
            v-for="(questionItem, questionIndex) in titleItem.questionItems"
            :key="questionIndex"
          >
            <div slot="header">
              题目类型： <span> {{ questionTypeEnum[questionItem.questionType] }}</span>
              <el-button
                type="text"
                style="float: right;"
                size="mini"
                @click="titleItem.questionItems.splice(questionIndex, 1)"
                >删除
              </el-button>
            </div>
            <div>
              题目{{ questionIndex + 1 }}
              <h4 v-html="questionItem.title"></h4>
            </div>
            <template>
              <div v-for="title in questionItem.items" :key="title.itemUuid" class="q-content">
                <div class="q-item-contain">
                  <span class="q-item-prefix" v-html="title.prefix"></span>
                  <span class="q-item-content" v-html="title.content"> </span>
                </div>
              </div>
            </template>

            <div>
              正确答案:
              <span
                v-if="questionItem.questionType === 2 || questionItem.questionType === 6"
                v-html="questionItem.correctArray"
              ></span>
              <span v-else v-html="questionItem.correct"></span>
            </div>
            <div> 解析： <span v-html="questionItem.analyze"></span> </div>
          </el-card>
        </div>
      </div>
    </div>
    <questionDialog
      v-if="showQuestionDialog"
      :showQuestionDialog.sync="showQuestionDialog"
      :excludeIds="excludeIds"
      @selectQuestions="handleSelectQuestions"
    />
  </div>
</template>
<script>
  import { examDetail, saveOrUpdateExam } from '@/api/TeachingCenter/examManage'
  import Descriptions from './components/descriptions'
  import questionDialog from '@/views/TeachingCenter/examManage/components/questionDialog'
  import Mixin from './mixin'
  import { mapGetters } from 'vuex'
  export default {
    name: 'EditExam',
    components: { Descriptions, questionDialog },
    mixins: [Mixin],
    data() {
      return {
        form: {
          level: null,
          subjectId: null,
          paperType: 1,
          limitDateTime: [],
          name: '',
          suggestTime: null,
          titleItems: [{ name: '', questionItems: [] }]
        },
        submitType: 0, //0：新增，1：修改，2：详情
        showQuestionDialog: false,
        excludeIds: []
      }
    },
    computed: {
      ...mapGetters(['questionTypeEnum'])
    },
    created() {
      const { id, type } = this.$route.query
      if (id) {
        this.getExamDetail(id)
        this.submitType = +type
      }
    },
    methods: {
      async getExamDetail(id) {
        const { data } = await examDetail({ id })
        this.form = data
      },

      async handleSubmit(formData) {
        await saveOrUpdateExam(formData)
        this.$Msg.success(this.submitType ? '编辑成功' : '新增成功')
        this.$router.push('./list')
      },
      addQuestion(titleItem) {
        this.excludeIds = titleItem.questionItems.map(({ id }) => id)
        this.showQuestionDialog = true
      },
      handleSelectQuestions(selectQuestion) {
        this.form.titleItems[0].questionItems = [
          ...this.form.titleItems[0].questionItems,
          ...selectQuestion
        ]
        this.showQuestionDialog = false
      }
    }
  }
</script>
<style lang="scss" scoped>
  .question-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .el-card {
      width: 350px;
      margin: 10px;
    }
  }
  .q-content {
    margin: 10px 0;
    .q-item-contain {
      .q-item-prefix {
        margin: 5px 10px;
      }
      .q-item-content {
        margin: 5px;
        white-space: normal;
      }
    }
  }
</style>
